<template>
    <div class="recommend">
        <search></search>
        <scroll class="recommend-content" :data="discList">
            <div>
                <div v-if="recommends.length" class="slider-wrapper">
                    <slider>
                        <div v-for="item in recommends">
                            <a :href="item.linkUrl">
                                <img :src="item.picUrl" alt="">
                            </a>
                        </div>
                    </slider>
                </div>
                 <div class="recommend-list">
                    <h3 class="hot">
                
                    </h3>
                    <div class="list-wrapper list-wrapper-hook">
                         <ul class="shopBox" ref="shopBox">
                            <li v-for="item in discList" class="item">
                                <div class="icon">
                                    <img v-lazy="item.imgurl" width="60" height="60" alt="">
                                </div>
                                <div class="text">
                                    <h2 class="name" v-html="item.creator.name"></h2>
                                    <p class="desc" v-html="item.dissname"></p>
                                </div>
                            </li>
                        </ul>
                        <div class="bottom-tip">
                            <span class="loading-hook">查看更多</span>
                        </div>
                    </div>
                </div>
            </div>
        </scroll>
    </div>
</template>
<script>
    import Scroll from 'base/scroll/scroll.vue'
    import Slider from 'base/slider/slider.vue'
    import Search from 'base/Search/Search.vue'
    export default {
        data (){
            return {
                recommends: [
                    {
                        id:12588,
                        linkUrl:"https://c.y.qq.com/node/m/client/music_headline/index.html?_hidehd=1&_button=2&zid=324712",
                        picUrl:"http://y.gtimg.cn/music/photo_new/T003R720x288M000004T2BrP0Rm4yB.jpg"
                    },
                    {
                        id:12543,
                        linkUrl:"https://c.y.qq.com/node/m/client/music_headline/index.html?_hidehd=1&_button=2&zid=330267",
                        picUrl:"http://y.gtimg.cn/music/photo_new/T003R720x288M000004M45g54cS5fq.jpg"
                    }
                ],
                discList: [
                    {
                        commit_time:"2017-10-12",
                        createtime:"2017-10-12",
                        creator: {
                            name: "清凉暖夏"
                        },
                        dissid:"3271827867",
                        dissname: "「Twee Pop」泡泡糖味儿的独立音乐",
                        imgurl: "http://p.qpic.cn/music_cover/sAHn6Bdkaz4Oic1JX2lu8ibWUEEXF2bmbkQ0wvr2b7gTHCcc8LHPM8vg/600?n=1",
                        introduction:"",
                        listennum:33407,
                        score: 0,
                        version :0
                    },
                    {
                        commit_time:"2017-10-12",
                        createtime:"2017-10-12",
                        creator: {
                            name: "清凉暖夏"
                        },
                        dissid:"3271827867",
                        dissname: "「Twee Pop」泡泡糖味儿的独立音乐",
                        imgurl: "http://p.qpic.cn/music_cover/sAHn6Bdkaz4Oic1JX2lu8ibWUEEXF2bmbkQ0wvr2b7gTHCcc8LHPM8vg/600?n=1",
                        introduction:"",
                        listennum:33407,
                        score: 0,
                        version :0
                    },
                    {
                        commit_time:"2017-10-12",
                        createtime:"2017-10-12",
                        creator: {
                            name: "清凉暖夏"
                        },
                        dissid:"3271827867",
                        dissname: "「Twee Pop」泡泡糖味儿的独立音乐",
                        imgurl: "http://p.qpic.cn/music_cover/sAHn6Bdkaz4Oic1JX2lu8ibWUEEXF2bmbkQ0wvr2b7gTHCcc8LHPM8vg/600?n=1",
                        introduction:"",
                        listennum:33407,
                        score: 0,
                        version :0
                    }
                ]
            }
        },
        created (){
            
        },
        methods: {
        },
        components: {
            Slider,
            Scroll,
            Search
        }
    }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

   h2{margin-top:0;}
  .recommend
    position: fixed
    width: 100%
    top: 0
    bottom: 0
    background:#ccc
    .recommend-content
      height: 100%
      overflow: hidden
      .slider-wrapper
        position: relative
        width: 100%
        overflow: hidden
      .recommend-list
        background:#ccc
      .recommend-list
        .list-title
          height: 65px
          line-height: 65px
          text-align: center
          font-size: $font-size-medium
          color: $color-theme
        .item
          display: flex
          box-sizing: border-box
          align-items: center
          padding: 20px 20px 20px 20px
          background: #ccc
          border-bottom:1px solid #ccc
          text-align:left
          background:#fff
          .icon
            flex: 0 0 60px
            width: 60px
            padding-right: 20px
            
          .text
            display: flex
            flex-direction: column
            justify-content: center
            flex: 1
            line-height: 20px
            overflow: hidden
            font-size: $font-size-medium
            .name
              margin-bottom: 10px
              color: $color-text-fllow
            .desc
              color: $color-text-fllow
      .loading-container
        position: absolute
        width: 100%
        top: 50%
        transform: translateY(-50%)
.add{
    position:absolute;
    top:22px;
    right:9px;
}       
.box {
  text-align:center;
  color:#000;
}
.hot{
    color:#ff3d00;
    padding:10px;
    background:#fff;
    font-size:18px;
    border-bottom:1px solid #ccc
}
</style>